<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../assets/lib/layui/css/layui.css">
  <link rel="stylesheet" href="./category.css">
</head>

<body>

  <div class="layui-card">
    <div class="layui-card-header">
      类别管理
      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm add">添加类别</button>
    </div>

    <div class="layui-card-body">
      <table class="layui-table">

        <!-- 规定列宽 -->
        <colgroup>
          <col width="40%">
          <col width="40%">
          <col>
        </colgroup>

        <thead>
          <tr>
            <th>分类名称</th>
            <th>分类别名</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>



        </tbody>


      </table>
    </div>
  </div>
  <script src="../../assets/lib/jquery.js"></script>
  <script src="../../assets/lib/layui/layui.all.js"></script>
  <script src="../../common.js"></script>
  <script src="./category.js"></script>
</body>

<script>
  get()
  // 首先先要加载页面    
  function get() {
    // 发送请求 获取页面内容   
    $.ajax({
      url: "/my/article/cates",
      success: function (res) {
        if (res.status == 0) {
          let str = ''
          res.data.forEach(item => {
            str += `<tr>
                  <td>${item.name}</td>
                  <td>${item.alias}</td>
                  <td>
                    <button type="button" class="layui-btn layui-btn-xs btnEdit" data-name="${item.name}" data-alias="${item.alias}" data-id="${item.Id}">编辑</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete" data-id="${item.Id}">删除</button>
                  </td>
                </tr>`;

          })
          $('tbody').html(str)
        }
      }
    })
  }

  // 删除    
  let layer = layui.layer
  $('tbody').on('click', function () {
    //  闭包函数 这里哦为啥叫闭包函数呢  因为闭包函数的没有this指向  
    //  所以根据上面的this指向   
    layer.confirm('你确定要删除？', (index) => {
      // 获取id  
      let id = $(this).attr('data-id')
      // 发送请求  
      $.ajax({
        url: "/my/article/deletecate/" + id,
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {
            get()
          }
        }
      })
    })
  })

  // 新增
  $('.add').click(function () {
    //  弹窗   
    layer.open({
      type: 1,
      content: add_str,
      title: '添加类别',
      area: ['500px', '250px']
    })
    // 注册提交事件   
    $('.add-form').on('submit', function (e) {
      e.preventDefault()
      //  收集和提交  
      $.ajax({
        url: "/my/article/addcates",
        type: "POST",
        data: $(this).serialize(),
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {
            get()
            layer.close(index)
          }
        }

      })

    })



  })
  // 编辑  
  let form = layui.form
  $('tbody').on('click', 'btnEdit', function () {
    let id = $(this).attr('data-id')
    let name = $(this).attr('data-name')
    let alias = $(this).attr('data-alias')
    // 准备一个弹窗    
    let index = layer.open({
      type: 1,
      content: edit_str,
      title: '编辑类别',
      area: ['500px', '250px'],
    })
    // 对弹窗内容进行赋值 
    form.val('abc', {
      name: name,
      alias: alias,
      id: id,
    })
    // 收集和提交  
    $('.edit-form').on('submit', function (e) {
      e.preventDefault()
      $.ajax({
        url: "/my/article/updatecate",
        type: 'post',
        data: $(this).serialize(),
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {
            get()
            layer.close(index)
          }
        }

      })
    })


  })










</script>







</html>